<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品</title>
    <link rel="stylesheet" href="bootstrap4/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/nav-bottom.css">
    <script src="bootstrap4/dist/js/jquery.slim.min.js"></script>
    <script src="bootstrap4/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="css/list.css">
<!--    引入自建json转对象方法-->
    <script src="js/json.js"></script>
<!--    引入商品列表-->
    <script src="js/goodsList.js"></script>
    <script src="js/template-web.js"></script>
    <script src="js/goodsNum.js"></script>
</head>
<body>
<div class="position-fixed w-100 bg-white" style="top: 0;z-index: 1000">
    <input type="search" name="search" id="search" class="w-100 input-group" placeholder="搜索">
</div>
<div class="container-fluid m-auto">
    <header class="w-100">
        <a href="javascript:void(0)" class="d-block w-100">
            <img src="images/list/head.jpg" class="w-100" alt="">
        </a>
    </header>
    <script type="text/html" id="tem1">
        <!--1、定义好 模板-->
        {{each  list}}
        <a href="javascript:void(0)" class="d-block col-6" zindex="{{$value.index}}">
            <img src="{{$value.img}}" class="w-100" alt="">
            <p class="shangping">{{$value.p}}<br>
                <small>{{$value.small}}</small><br><br>
                <span>¥<span class="money">{{$value.money}}</span></span>
            </p>
        </a>
        {{/each}}
    </script>
    <div class="row" id="list">
<!--        商品列表，由本地数据提供-->
    </div>
</div>
<!--底部导航栏 开始-->
<ul class="nav nav-pills nav-fill fixed-bottom" id="footer_nav">
    <li class="nav-item">
        <a class="nav-link" href="index.html">
            <div class="img"></div>
            首页
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link nav-active" href="javascript:;">
            <div class="img"></div>
            列表
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="cart.html">
            <div class="img"></div>
            购物袋
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="user.html">
            <div class="img"></div>
            我的
        </a>
    </li>
</ul>
<!--底部导航栏 结束-->
<script !src="">
</script>
</body>
</html>